<template xmlns:v-clipboard="http://www.w3.org/1999/xhtml">
  <div>
    <div align="center">
      <el-card style="width: 1500px" align="center">
        <el-row>

          <el-col :span="7">
            <el-input placeholder="请输入查询内容" v-model="quaryInfo.quary" clearable @clear="getCustomMessage"></el-input>
          </el-col>
          <el-col  :span="1">
            <el-button type="primary" icon="el-icon-search" @click="getCustomMessage">搜索</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4"></el-col>
          <el-col>
            <el-table :data="customlist" border stripe style="width: 100%" align="center" height="700">
              <el-table-column prop="customID" v-if="show=false"></el-table-column>
              <el-table-column prop="date" label="日期" width="200%"></el-table-column>
              <el-table-column prop="customName" label="姓名" width="100%"></el-table-column>
              <el-table-column prop="province" label="省份" width="100%"></el-table-column>
              <el-table-column prop="city" label="市区" width="100%"></el-table-column>
              <el-table-column prop="address" label="地址" width="300%"></el-table-column>
              <el-table-column prop="shen_qing_jin_e" label="申请金额" width="100%"></el-table-column>
              <el-table-column prop="fang_kuan_jin_e" label="已放款" width="100%"></el-table-column>
              <el-table-column  label="操作" width="500">
                <template  slot-scope="scope">
                  <el-button @click="handleziyouzijin(scope.row.customID)" type="primary" icon="el-icon-sold-out">自有资金</el-button>
                  <el-button @click="handlelianhefangkuan(scope.row.customID)" type="primary" icon="el-icon-connection">联合放款</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="quaryInfo.PageNum"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="quaryInfo.PageSize"
              layout=" sizes, prev, pager, next, total, jumper"
              :total="total">
            </el-pagination>
            <el-dialog
              title="自有资金"
              :visible.sync="EditdialogVisible"
              width="20%" @close="EditdialogVisible = false">
              <el-form label-width="150px">
                <el-form-item label="放款金额：">
                  <el-input v-model="hejijine"></el-input>
                </el-form-item>
                <el-form-item label="合计：">
                  <el-input v-model="hejijine"></el-input>
                </el-form-item>
                <el-form-item label="每月还款：320元">
                </el-form-item>
                <el-form-item label="还款日期：20号">
                </el-form-item>
              </el-form>
              <span slot="footer" class="dialog-footer">
           <el-button type="primary" @click="confirmUpdate">确认放款</el-button>
            <el-button @click="EditdialogVisible = false">取 消</el-button>
          </span>
            </el-dialog>
            <el-dialog
              title="联合放款"
              :visible.sync="EditdialogVisible1"
              width="20%" @close="EditdialogVisible1 = false">
              <el-form label-width="150px">
                <el-form-item label="第三方：">
                  <el-input v-model="disanfang"></el-input>
                </el-form-item>
                <el-form-item label="自有资金：">
                  <el-input v-model="ziyouzijin"></el-input>
                </el-form-item>
                <el-form-item label="合计：">
                  <el-input v-model="hejijine"></el-input>
                </el-form-item>
                <el-form-item label="每月还款：320元">
                </el-form-item>
                <el-form-item label="还款日期：20号">
                </el-form-item>
              </el-form>
              <span slot="footer" class="dialog-footer">
           <el-button type="primary" @click="confirmUpdate">确认放款</el-button>
            <el-button @click="EditdialogVisible1 = false">取 消</el-button>
          </span>
            </el-dialog>
          </el-col>
        </el-row>
      </el-card>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        quaryInfo:{
          quary:'',
          PageNum:1,
          PageSize:10
        },
        disanfang:'',
        ziyouzijin:'',
        hejijine:'',
        total:0,
        customID:'',
        customlist:[],
        message:'',
        EditdialogVisible:false,
        EditdialogVisible1:false
      }
    },
    created(){
      this.getCustomMessage()
    },
    methods:{
      async getCustomMessage(){
        const {data:res}=await this.$http.get('neishen/readFangkuan',{params:this.quaryInfo})
        this.customlist = res.Custom
        this.total=res.total
        this.PageSize=res.PageSize
        this.PageNum=res.PageNum
      },

      handleSizeChange(NewSize){
        this.quaryInfo.PageSize = NewSize
        this.getCustomMessage()

      },
      handleCurrentChange(NewPage){
        this.quaryInfo.PageNum = NewPage
        this.getCustomMessage()
      },
      confirmUpdate(){
        this.$http.get('neishen/changeFangkuan',{params:{customID:this.customID,amount:this.hejijine}})
        this.$message.success('放款成功!');
        this.EditdialogVisible = false
        this.EditdialogVisible1 = false
        this.hejijine=''
        this.getCustomMessage()
      },
      handleziyouzijin(id){
        this.customID = id;
        this.EditdialogVisible = true;
      },
      handlelianhefangkuan(id){
        this.customID = id;
        this.EditdialogVisible1 = true;
      }
    }
  }
</script>
